<section class="page user-detail-page">
  <div class="title">
    {{userId?'用户详情':'新增用户'}}
  </div>
  <nz-card>
    <ng-template #extra>
      <button nz-button [nzType]="'primary'" (click)="submitForm(content, footer)">
        <span>保存</span>
      </button>
      <button nz-button routerLink="/user-manage">
        <span>取消</span>
      </button>
    </ng-template>
    <ng-template #body>
      <form nz-form nzLayout="horizontal" [formGroup]="userForm" (ngSubmit)="submitForm()">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSpan]="3">
            <label>用户名</label>
          </div>
          <div nz-form-control nz-col [nzSpan]="10" [nzValidateStatus]="userForm.controls.username">
            <nz-input formControlName="username" [nzPlaceHolder]="'用户名'" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="userForm.controls.username.dirty&&userForm.controls.username.hasError('required')">
              请输入用户名
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSpan]="3">
            <label>真实姓名</label>
          </div>
          <div nz-form-control nz-col [nzSpan]="10" [nzValidateStatus]="userForm.controls.realname">
            <nz-input formControlName="realname" [nzPlaceHolder]="'真实姓名'" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="userForm.controls.realname.dirty&&userForm.controls.realname.hasError('required')">
              请输入真实姓名
            </div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSpan]="3">
            <label>手机号</label>
          </div>
          <div nz-form-control nz-col [nzSpan]="10">
            <nz-input formControlName="phonenumber" [nzPlaceHolder]="'手机号'" [nzSize]="'large'">
            </nz-input>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSpan]="3">
            <label>邮箱</label>
          </div>
          <div nz-form-control nz-col [nzSpan]="10">
            <nz-input nzType="emial" formControlName="email" [nzPlaceHolder]="'邮箱'" [nzSize]="'large'">
            </nz-input>
          </div>
        </div>
      </form>
    </ng-template>
  </nz-card>
</section>
